<template>
  <div class="MainIndex">
        <router-view class="router-view"></router-view> 
        <van-tabbar v-model="active">
            <van-tabbar-item  @click.native="tabJump">
                <span>首页</span>
                <template slot="icon" slot-scope="props">
                   <span class="iconfont iconfont-shouye" :class="{'icon-large':active==0}"></span>
                </template>
            </van-tabbar-item>
            <van-tabbar-item @click.native="tabJump">
                <span>分类</span>
                <template slot="icon" slot-scope="props">
                   <span class="iconfont iconfont-fenlei1" :class="{'icon-large':active==1}"></span>
                </template>            
            </van-tabbar-item>
            <van-tabbar-item @click.native="tabJump">
                <span>购物车</span>
                <template slot="icon" slot-scope="props">
                   <span class="iconfont iconfont-gouwuche1" :class="{'icon-large':active==2}"></span>
                </template>            
            </van-tabbar-item>
            <van-tabbar-item @click.native="tabJump">
                <span>我的</span>
                <template slot="icon" slot-scope="props">
                   <span class="iconfont iconfont-wode" :class="{'icon-large':active==3}"></span>
                </template>            
            </van-tabbar-item>            
        </van-tabbar>
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  name: 'MainIndex',
  created (){
  this.judgeRoute()
  },
  data () {
    return {
        active: 0,
    }
  },
  watch:{
      '$route'(a,b){
          if(a){
            this.judgeRoute();
          }
      }
  },
  methods:{
    tabJump (){
        if(this.active==0){
            this.$router.push({name:'HomePage'})
        }else if(this.active==1){
            this.$router.push({name:'MenuPage'})
        }else if(this.active==2){
            this.$router.push({name:'CartPage'})
        }else{
            this.$router.push({name:'UserPage'})
        }   
    },
    judgeRoute (){
        if(this.$route.name=='HomePage'){
            this.active=0;
        }else if(this.$route.name=='MenuPage'){
            this.active=1;
        }else if(this.$route.name=='CartPage'){
            this.active=2;
        }else{
            this.active=3;
        }

    }
  },
  mounted (){

  }
}
</script>


<style scoped lang="scss">
.MainIndex{
    box-sizing:border-box;
    padding-bottom:1.333333rem;
    overflow-y:auto;
    .van-tabbar-item--active {
        color: #e4393c;
    }
    .icon-large{
        font-size:.56rem;
    }
}

</style>
